<template>
  <div id="MovieInfo">
    
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1" @click.native="Review=true;Actor=false">剧情简介</el-menu-item>
          <el-menu-item index="2" @click.native="Review=false;Actor=true">演职人员</el-menu-item>
        </el-menu>
        <div v-if="Review">{{MovieInfo.MovieReview}}</div>
        <div v-if="Actor">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="导演" name="1">
              <el-row :gutter="30">
                <el-col :span="5" v-for="(o, index) in DirectInfo" :key="index">
                  <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <el-button style="padding:0">
                      <img :src="o.Direct.DirectImg" class="image" />
                      <div style="padding: 14px;">
                        <span>{{o.Direct.DirectName}}</span>
                      </div>
                    </el-button>
                  </el-card>
                </el-col>
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="演员" name="2">
              <el-row :gutter="30">
                <el-col :span="5" v-for="(o, index) in ActorInfo" :key="index">
                  <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <el-button style="padding:0">
                      <img :src="o.Actor.ActorImg" class="image" />
                      <div style="padding: 14px;">
                        <span>{{o.Actor.ActorName}}</span>
                      </div>
                    </el-button>
                  </el-card>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: ["1", "2"],
      MovieID: null,
      ActorID: null,
      MovieInfo: [],
      ActorInfo: [],
      DirectInfo: [],
      activeIndex: "1",
      Review: true,
      Actor: false
    };
  },
  mounted() {
    this.MovieID = this.$store.state.MovieId;
    this.Ajax.get("api/MovieInfoes/GetMovieInfo?id=" + this.MovieID).then(m => {
      this.MovieInfo = m.data;
      this.ActorID = m.data.ActorID;
    });
    this.Ajax.get("api/Actor/GetActorByMovieID?id=" + this.MovieID).then(A => {
      this.ActorInfo = A.data;
    });
    this.Ajax.get("api/Direct/GetDirectrByMovieID?id=" + this.MovieID).then(
      A => {
        this.DirectInfo = A.data;
      }
    );
  }
};
</script>
